iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
0

避免晚上被追殺,出門前趕快發文,今天來說說Tab Bar Controller

radio-style selection的管理介面,決定哪個子視圖可以被顯示的View Controller的控制器。通常會有3-5個View Controller在視圖群裡,使用者可以按下畫面中最底下的tab bar去選擇要在哪個View Controller

tab bar 通常被使用在不同的View Controller切換,以上以Instagram作爲舉例,第一個tab鍵顯示了Home User的介面,而放大鏡的icon的View Controller則是可以在app裡搜尋使用者。

tab bar controller滿常見在有不同UI可以顯示不同的數據,在許多應用程式被使用在讓用戶區分不能UI能進入不同頁面。在原生的App也會被使用,像是電話和時間的APP。

如何建立Tab Bar View Controller

在ios使用tab bar controller是非常簡單的,可以在xcode直接embed in Tab Bar Controller。或是實例化UITabBarController。

  • 直接在xcode裡 選擇Editior -> Embed In -> Tab Bar Controller

  • 接著是實例化View Controller,如下列程式碼
let firstVC = FirstViewController()
let secondVC = SecondViewController()
let thirdVC = ThirdViewController()

let tabBarController = UITabBarController()
tabBarController.viewControllers = [firstVC, secondVC, thirdVC]

在上面的程式碼,我們先建立了三個不同的View Controller,再來實例化UITabBarController(),最後使用Array將三個View Controller property指派給tabBarController。

你可以使用selectedViewController,這個property去初始化哪個View Controller會最先被顯示,也可以使用selectedIndex property,去選擇哪個View Controller被顯示。

tabBarController.selectedViewController = secondVC

tabBarController.selectedIndex = 2

配置Tab Bar Item

每一個View Controller都有一個相對應得tab bar item,UITabBarItem的class

tab bar item在UITabBarItem的class裡,可以在attributes inspector調整他的屬性,像是icon跟title。可以將實例化的UITabBarItem分配給view controller

let item = UITabBarItem()
item.title = "Home"
item.image = UIImage(named: "home_icon")

let homeVC = HomeViewController()
homeVC.tabBarItem = item

let tabBarController = UITabBarController()
tabBarController.viewControllers = [homeVC, ...]

上面的程式碼中,實例化了UITabBarItem然後改變他的屬性,像是圖片;tab bar的icon,還有顯示在icon下方的title。


上一篇
Swift-Navigation Controller
下一篇
Swift-UIPickerView & UIDatePicker
系列文
Swift!從新手到微上手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言